<template>
  <web-view :src="url" @message="onMessage" @load="load" @error="error" />
</template>

<script lang="ts" setup>
  /* h5RichTextEditor 详情 */
  import { useEnv } from '@/hooks/core/useEnv';
  import { onLoad } from '@/router';
  import { type H5RichTextEditor } from '@/router/types/modules';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { ref } from 'vue';

  const { getEnv } = useEnv();
  const { tenantId, token } = useUserStoreWithOut();
  const url = ref('');
  let callback: H5RichTextEditor['callback'];

  onLoad<'h5RichTextEditor'>((op) => {
    callback = op.callback;
    let urlText = `${getEnv('H5_BASE_URL')}editor.html?tenantId=${tenantId}&token=${token}`;
    if (op.text) {
      urlText += `&text=${op.text}`;
    }
    if (op.id) {
      urlText += `&id=${op.id}`;
    }
    url.value = urlText;
  });

  function onMessage(event: any) {
    uni.showLoading({ title: '保存中...', mask: true });
    const { text, customPageId } = event.detail.data[0];
    callback?.(text, customPageId);
    uni.hideLoading();
  }

  function load(e: any) {
    console.log('webview onLoad', e);
  }

  function error(e: any) {
    console.log('webview onError', e);
  }
</script>

<style lang="scss" scoped></style>
